.presentation-wrapper {
  @include html-color('html-color');
  font-family: $font-family;
  .presentation-header {
    width: 100%;
    height: $height-lg;
    display: flex;
    justify-content: space-between;
    padding: 0 15%;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    @include background-color('background-color');
    z-index: $z-index-third;
    .header-left {
      line-height: $line-height-lg;
      -webkit-line-clamp: 2;
      background-image: -webkit-linear-gradient(left, #000, $hover);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: $font-family;
      font-size: $font-size-lg;
      font-weight: $font-weight-lg;
      @include font-color('text-color');
    }
    .header-right {
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      &-icon {
        margin-left: $margin-base * 2;
        display: flex;
        align-items: center;
        i {
          font-size: $font-size-lg;
          @include icon-color('icon-color');
        }
      }
    }
  }
  .presentation-article {
    min-height: calc(100vh - 90px);
    width: 60%;
    margin: $margin-base auto 0;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    @include font-color('text-color');
    .presentation-article_box {
      width: 70%;
      .presentation-content {
        cursor: pointer;
        @include background-color('background-color');
        margin-bottom: $margin-base;
        &_item {
          padding: 2 * $padding-base 0;
          margin: 0 $margin-base * 2;
          font-size: $font-size;
          .classify-item {
            display: flex;
            font-size: $font-size;
            li {
              padding: 0 $padding-base;
            }
            li:nth-child(1) {
              border-right: 1px solid #ccc;
              padding: 0 $padding-base 0 0;
            }
            li:nth-child(2):hover {
              color: $hover;
            }
          }
          .title-content {
            display: flex;
            justify-content: space-between;
            height: 100px;
            .content {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              overflow: hidden;
              flex: 3;
              font-size: $font-size;
              margin: $margin-base 0;
              .title {
                font-weight: $font-weight-lg;
              }
              > p {
                margin: $margin-base 0;
                font-size: $font-size;
              }
            }
            .img {
              width: $img-width;
              border-radius: $border-radius-sm;
              overflow: hidden;
              flex: 1;
              img {
                width: 100%;
                height: 100%;
                transition: all 0.3s;
              }

              img:hover {
                transform: scale(1.5);
              }
            }
          }
          .options {
            i:not(i:nth-child(1)) {
              padding-left: $padding-base;
            }
            i span {
              font-size: $font-size-sm;
              padding: $padding-base / 2;
            }
          }
        }
      }
      .presentation-centent:hover {
        @include html-color('html-color');
      }
    }

    .presentation-nav_box {
      width: 26%;
      position: sticky;
      top: 90px;
      height: 100%;
      .presentation-nav {
        &_item {
          margin-bottom: $margin-base;
        }
      }
    }
  }
}
